<template>
  <div class="container">
    <div class="select-quick-container">
      <div class="select-quick" ref="quickList">
        <div v-for="item in quickData" :key="item.id" class="quick-item" draggable="true">
          <img :src="item.icon" />
          <span class="quick-name">{{ item.name }}</span>
          <el-icon color="#99A2B7" size="12" @click="removeData(item)"><CloseBold /></el-icon>
        </div>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { CloseBold } from '@element-plus/icons-vue'
import Sortable from 'sortablejs'
import mockData from './quickMockData'

const quickData = ref([])
const quickList = ref(null)
onMounted(() => {
  quickData.value = mockData
  nextTick(() => {
    initSortable()
  })
})
// 初始化拖拽排序
const initSortable = () => {
  if (quickList.value && quickData.value.length > 0) {
    new Sortable(quickList.value, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      chosenClass: 'sortable-chosen', // 选中时添加的样式
      dragClass: 'sortable-drag', // 拖拽时添加的样式
      preventOnFilter: true,
      direction: 'horizontal', // 明确水平方向拖拽
      forceFallback: true, // 使用原生拖拽更精确
      fallbackTolerance: 3, // 拖拽容差
      swapThreshold: 0.65, // 提高交换阈值
      invertSwap: true, // 启用反向交换
      onEnd: (evt) => {
        // 拖拽结束后更新数组顺序
        if (evt.newIndex !== evt.oldIndex) {
          const newArray = [...quickData.value]
          const [movedItem] = newArray.splice(evt.oldIndex, 1)
          newArray.splice(evt.newIndex, 0, movedItem)
          quickData.value = newArray
        }
      }
    })
  }
}
const removeData = (item) => {
  quickData.value = quickData.value.filter((i) => i.id !== item.id)
}
const submitForm = () => {
  try {
    console.log('排序后的数据:', quickData.value)
    // 后台请求
    ElMessage({
      message: '编辑菜单成功',
      type: 'success'
    })
  } catch (error) {
    throw new Error('接口报错，请重试')
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 800px;
  height: 100%;
  margin: 20px auto;
}
.select-quick-container {
  width: 100%;
  overflow: hidden; /* 防止容器滚动影响拖拽 */
  margin-bottom: 16px;
}
.select-quick {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  .quick-item {
    display: flex;
    padding: 0 16px;
    height: 30px;
    align-items: center;
    border: 1px dashed #dbdbdb;
    border-radius: 20px;
    cursor: move;
    user-select: none;
    flex-shrink: 0;
    background: white; /* 添加背景色避免透明重叠 */
    position: relative; /* 确保z-index生效 */
    z-index: 1; /* 确保拖拽元素在最上层 */
    img {
      width: 24px;
      height: 24px;
      margin-right: 4px;
      pointer-events: none;
    }
    .quick-name {
      color: #202020;
      font-size: 14px;
      margin-right: 4px;
      pointer-events: none;
      white-space: nowrap;
    }
    .el-icon {
      cursor: pointer;
    }
  }
}
.sortable-ghost {
  opacity: 0.6;
  background: #c8ebfb;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.sortable-chosen {
  opacity: 0.8;
}

.sortable-drag {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dialog-footer {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
</style>
